<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Drum Kit</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="key" data-key="KeyA">
            <audio src="sounds/clap.wav"></audio>
            <h2>A</h2>
            <p>CLAP</p>
        </div>
        <div class="key" data-key="KeyS">
            <audio src="sounds/hihat.wav"></audio>
            <h2>S</h2>
            <p>HIHAT</p>
        </div>
        <div class="key" data-key="KeyD">
            <audio src="sounds/kick.wav"></audio>
            <h2>D</h2>
            <p>KICK</p>
        </div>
        <div class="key" data-key="KeyF">
            <audio src="sounds/openhat.wav"></audio>
            <h2>F</h2>
            <p>OPENHAT</p>
        </div>
        <div class="key" data-key="KeyG">
            <audio src="sounds/boom.wav"></audio>
            <h2>G</h2>
            <p>BOOM</p>
        </div>
        <div class="key" data-key="KeyH">
            <audio src="sounds/ride.wav"></audio>
            <h2>H</h2>
            <p>RIDE</p>
        </div>
        <div class="key" data-key="KeyJ">
            <audio src="sounds/snare.wav"></audio>
            <h2>J</h2>
            <p>SNARE</p>
        </div>
        <div class="key" data-key="KeyK">
            <audio src="sounds/tom.wav"></audio>
            <h2>K</h2>
            <p>TOM</p>
        </div>
        <div class="key" data-key="KeyL">
            <audio src="sounds/tink.wav"></audio>
            <h2>L</h2>
            <p>TINK</p>
        </div>
    </div>
    <script src="./js/music.js"></script>

</body>

</html>